﻿@*
    For more information on enabling MVC for empty projects, visit https://go.microsoft.com/fwlink/?LinkID=397860
*@
@{
}
<link href="~/lib/layui/css/layui.css" rel="stylesheet" />   @* 一 ①样式 *@ @* ②layui js库 *@
<script src="~/js/js.cookie.js"></script>
<script src="~/js/moment.js"></script>
<script src="~/lib/layui/layui.js"></script> 
<script src="~/lib/jquery/dist/jquery.js"></script>

@* {
  "size": 3,
  "count": 10,
  "data": [
    {
      "id": 1,
      "userId": 1,
      "time": "2024-09-18T07:00:18.265",
      "jiFenCount": 100,
      "reason": "测试积分"
    },
    {
      "id": 2,
      "userId": 1,
      "time": "2024-09-18T07:00:18.265",
      "jiFenCount": 200,
      "reason": "测试积分"
    },
    {
      "id": 3,
      "userId": 1,
      "time": "2024-09-18T07:00:18.265",
      "jiFenCount": 300,
      "reason": "测试积分"
    }
  ]
} *@


<h2>积分列表</h2>

<table class="layui-table">
    <tr>
        <td>id</td>
        <td>用户编号</td>
        <td>积分时间</td>
        <td>积分变动</td>
        <td>积分原因</td>
    </tr>
    <tbody id="data"></tbody>
</table>

@* 二.把容器复制粘贴过来 *@
<div id="demo-laypage-all"></div>

    <script>
        $(function () {      
          fenye();
        });
        // 三.把js代码粘贴过来
        function fenye() { 
        
                layui.use(function () {
                    var laypage = layui.laypage;
                    ShowList();
                    // 完整显示
                    laypage.render({
                        elem: 'demo-laypage-all', // 元素 id
                        count: count, // 数据总数
                        limit:size,
                        limits:[5,6,7,8,9],
                        layout: ['count', 'prev', 'page', 'next', 'limit', 'refresh', 'skip'], // 功能布局
                        jump: function (obj) {
                            index = obj.curr;//给index赋值,也即是当前页码
                            size = obj.limit; //给size赋值  也就是你自己选择每页大小

                            ShowList();//分页后再调用一下ShowList数据 刷新页面
                        }
                    });
                });
        }

        //全局变量
        var index = 1;
        var size = 3;
        var count = 0;
        function ShowList() {
            $.ajax({
                url: 'https://localhost:7061/api/JiFen/GetJifenPages?index=' + index + '&size=' + size,
                type: 'get',
                async:false,
                success: function (res) {

                    console.log(res);
                    var tr = '';
                    //<td>${moment(obj.time).format("yyyy-MM-DD HH:MM dd")}</td>  使用moment js 处理时间格式
                    $(res.data).each(function (i, obj) {
                        tr += ` <tr>
                            <td>${obj.id}</td>
                                <td>${obj.userId}</td>
                                <td>${moment(obj.time).format("yyyy-MM-DD HH:MM")}</td>
                                <td>${obj.jiFenCount}</td>
                                <td>${obj.reason}</td>
                        </tr>`;
                    });
                    $("#data").html(tr);
                    count = res.count;                }
               
            });
        }
    </script>